import {
  defineComponent,
  ref,
  onMounted,
  computed,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  Fragment,
  renderList,
  normalizeStyle,
  toDisplayString
} from "vue";
import {
  b as useProp,
  h as uuid,
  j as useData,
  k as useEventBus,
  _ as _export_sfc
} from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "dv-percent-pond" };
const _hoisted_2 = ["id"];
const _hoisted_3 = ["offset", "stop-color"];
const _hoisted_4 = ["id", "x2"];
const _hoisted_5 = ["offset", "stop-color"];
const _hoisted_6 = [
  "x",
  "y",
  "rx",
  "ry",
  "stroke-width",
  "stroke",
  "width",
  "height"
];
const _hoisted_7 = ["stroke-width", "stroke-dasharray", "stroke", "points"];
const _hoisted_8 = ["stroke", "fill", "x", "y"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Progress",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const dataValue = ref(60);
    const gradientId1 = ref(`percent-pond-gradientId1-${uuid()}`);
    const gradientId2 = ref(`percent-pond-gradientId2-${uuid()}`);
    const temValue = ref();
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    const handler = event => {
      const item = event;
      if (propValue.data.datatag && item.TagName === propValue.data.datatag) {
        dataValue.value = Number(
          (
            (Number(item.TagValue) * 100) /
            Number(propValue.data.maxValue)
          ).toFixed(2)
        );
      }
    };
    onMounted(async () => {
      await initData();
    });
    const dataChange = (resp, _) => {
      if (resp.status === "SUCCESS") {
        var keys = Object.keys(resp.afterData);
        temValue.value =
          ((Number(resp.afterData[keys[0]]) || 0) * 100) /
          Number(propValue.data.maxValue);
        dataValue.value = temValue.value.toFixed(2);
      }
    };
    useData(props.component, dataChange);
    const initData = async () => {};
    const mergedConfig = computed(() => {
      return {
        colors: [propValue.attr.color1, propValue.attr.color2],
        //['#3DE7C9', '#00BAFF'],
        borderWidth: Number(propValue.attr.borderWidth),
        borderGap: Number(propValue.attr.borderGap),
        lineDash: propValue.attr.lineDash,
        gapWeight: propValue.attr.gapWeight,
        textColor: propValue.attr.textColor,
        fontSize: Number(propValue.attr.fontSize),
        borderRadius: Number(propValue.attr.borderRadius),
        localGradient: Boolean(propValue.attr.localGradient),
        formatter: propValue.attr.formatter
      };
    });
    const rectWidth = computed(() => {
      if (!mergedConfig.value.borderWidth) {
        return 0;
      }
      return width.value - mergedConfig.value.borderWidth;
    });
    const rectHeight = computed(() => {
      if (!mergedConfig.value.borderWidth) {
        return 0;
      }
      return height.value - mergedConfig.value.borderWidth;
    });
    const polylineWidth = computed(() => {
      if (!mergedConfig.value) {
        return 0;
      }
      return (
        height.value -
        (mergedConfig.value.borderWidth + mergedConfig.value.borderGap) * 2
      );
    });
    const polylineGradient = computed(() => {
      if (!mergedConfig.value) {
        return gradientId2.value;
      }
      if (mergedConfig.value.localGradient) {
        return gradientId1.value;
      }
      return gradientId2.value;
    });
    const points = computed(() => {
      const halfHeight = height.value / 2;
      if (!mergedConfig.value) {
        return `0, ${halfHeight} 0, ${halfHeight}`;
      }
      const polylineLength =
        ((width.value -
          (mergedConfig.value.borderWidth + mergedConfig.value.borderGap) * 2) /
          100) *
        dataValue.value;
      return `
        ${
          mergedConfig.value.borderWidth + mergedConfig.value.borderGap
        }, ${halfHeight}
        ${
          mergedConfig.value.borderWidth +
          mergedConfig.value.borderGap +
          polylineLength
        }, ${halfHeight + 1e-3}`;
    });
    const linearGradients = computed(() => {
      if (!mergedConfig.value.colors) {
        return [];
      }
      const colorNum = mergedConfig.value.colors.length;
      const colorOffsetGap = 100 / (colorNum - 1);
      return mergedConfig.value.colors.map((c, i) => [colorOffsetGap * i, c]);
    });
    const gradient2XPos = computed(() => {
      if (!mergedConfig.value) {
        return "100%";
      } else {
        return "200%";
      }
    });
    const details = computed(() => {
      if (!mergedConfig.value.formatter) {
        return "";
      }
      return mergedConfig.value.formatter.replace(
        "{value}",
        dataValue.value.toString()
      );
    });
    const textSize = computed(() => {
      return { fontSize: (propValue.attr.fontSize || 12) + "px" };
    });
    useEventBus("actual", handler);
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock("svg", null, [
            createElementVNode("defs", null, [
              createElementVNode(
                "linearGradient",
                {
                  id: gradientId1.value,
                  x1: "0%",
                  y1: "0%",
                  x2: "100%",
                  y2: "0%"
                },
                [
                  (openBlock(true),
                  createElementBlock(
                    Fragment,
                    null,
                    renderList(linearGradients.value, (lc, index) => {
                      return (
                        openBlock(),
                        createElementBlock(
                          "stop",
                          {
                            key: index,
                            offset: `${lc[0]}%`,
                            "stop-color": lc[1]
                          },
                          null,
                          8,
                          _hoisted_3
                        )
                      );
                    }),
                    128
                  ))
                ],
                8,
                _hoisted_2
              ),
              createElementVNode(
                "linearGradient",
                {
                  id: gradientId2.value,
                  x1: "0%",
                  y1: "0%",
                  x2: gradient2XPos.value,
                  y2: "0%"
                },
                [
                  (openBlock(true),
                  createElementBlock(
                    Fragment,
                    null,
                    renderList(linearGradients.value, (lc, index) => {
                      return (
                        openBlock(),
                        createElementBlock(
                          "stop",
                          {
                            key: index,
                            offset: `${lc[0]}%`,
                            "stop-color": lc[1]
                          },
                          null,
                          8,
                          _hoisted_5
                        )
                      );
                    }),
                    128
                  ))
                ],
                8,
                _hoisted_4
              )
            ]),
            createElementVNode(
              "rect",
              {
                x: mergedConfig.value
                  ? mergedConfig.value.borderWidth / 2
                  : "0",
                y: mergedConfig.value
                  ? mergedConfig.value.borderWidth / 2
                  : "0",
                rx: mergedConfig.value ? mergedConfig.value.borderRadius : "0",
                ry: mergedConfig.value ? mergedConfig.value.borderRadius : "0",
                fill: "transparent",
                "stroke-width": mergedConfig.value
                  ? mergedConfig.value.borderWidth
                  : "0",
                stroke: `url(#${gradientId1.value})`,
                width: rectWidth.value > 0 ? rectWidth.value : 0,
                height: rectHeight.value > 0 ? rectHeight.value : 0
              },
              null,
              8,
              _hoisted_6
            ),
            createElementVNode(
              "polyline",
              {
                "stroke-width": polylineWidth.value,
                "stroke-dasharray": mergedConfig.value
                  ? [
                      mergedConfig.value.lineDash,
                      mergedConfig.value.gapWeight
                    ].join(",")
                  : "0",
                stroke: `url(#${polylineGradient.value})`,
                points: points.value
              },
              null,
              8,
              _hoisted_7
            ),
            createElementVNode(
              "text",
              {
                style: normalizeStyle(textSize.value),
                stroke: mergedConfig.value
                  ? mergedConfig.value.textColor
                  : "#fff",
                fill: mergedConfig.value
                  ? mergedConfig.value.textColor
                  : "#fff",
                x: width.value / 2,
                y: height.value / 2
              },
              toDisplayString(details.value),
              13,
              _hoisted_8
            )
          ]))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const Progress = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-efcd1bc7"]
]);
export { Progress as default };
